<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('基础表现')"/>
    <style>
        .sortable-ghost {
            opacity: 0.4;
            background-color: #F4E2C9;
        }

        .block__list li {
            cursor: pointer;


        }

        .block__list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .block__list li {
            width: auto;
            margin: 0 2px;
            float: left;
            background: #d7d7dd;
            border-radius: 5px;

        }


    </style>
</head>
<body class="gray-bg">
<div class="container-div">
<!--    <div class="row" style="height: 45%">-->
<!--        <div class="col-sm-12 select-table table-striped">-->
<!--            <table id="bootstrap-table"></table>-->
<!--        </div>-->
<!--    </div>-->

    <div class="col-sm-12 search-collapse">
        <form class="form-horizontal m" id="data-form">
            <input name="childCourseId" id="childCourseId" th:value="${childCourseId}" type="hidden"/>
            <input name="childId" id="childId" th:value="${childId}" type="hidden"/>
            <div class="form-group" >
                <label class="col-sm-2 font-noraml">不良体态：</label>
                <div class="col-sm-4" style="margin-top: -6px">
                    <select class="form-control noselect2 selectpicker" name="bultt" id="bultt" data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('bultt')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>

                <label class="col-sm-2 font-noraml">站姿不良：</label>
                <div class="col-sm-4" style="margin-top: -6px">
                    <select class="form-control noselect2 selectpicker" name="zhanzbl" id="zhanzbl" data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('zhanzbl')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 font-noraml">坐姿不良：</label>
                <div class="col-sm-4" style="margin-top: -6px">
                    <select class="form-control noselect2 selectpicker" name="zuozbl"  id="zuozbl" data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('zuozbl')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>

                <label class="col-sm-2 font-noraml">动态平衡：</label>
                <div class="col-sm-4" style="margin-top: -6px">
                    <select class="form-control noselect2 selectpicker" name="dongtph" id="dongtph"  data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('dongtph')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 font-noraml">静态平衡：</label>
                <div class="col-sm-4" style="margin-top: -6px">
                    <select class="form-control noselect2 selectpicker" name="jingtph" id="jingtph" data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('jingtph')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>

                <label class="col-sm-2 font-noraml">协调性：</label>
                <div class="col-sm-4" style="margin-top: -6px">
                    <select class="form-control noselect2 selectpicker" name="xietx" id="xietx" data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('xietx')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 font-noraml">空间常识：</label>
                <div class="col-sm-4" style="margin-top: -6px">
                    <select class="form-control noselect2 selectpicker" name="kongjcs" id="kongjcs" data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('kongjcs')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>

                <label class="col-sm-2 font-noraml">空间判断：</label>
                <div class="col-sm-4" style="margin-top: -6px">
                    <select class="form-control noselect2 selectpicker" name="kongjpd" id="kongjpd"  data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('kongjpd')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 font-noraml">10米折返跑时间：</label>
                <div class="col-sm-4" style="margin-top: -6px">
                    <input class="form-control" type="text" name="speed" id="speed">
                </div>

                <label class="col-sm-2 font-noraml">攀爬动作：</label>
                <div class="col-sm-4" style="margin-top: -6px">
                    <select class="form-control noselect2 selectpicker" name="panpdz" id="panpdz"  data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('panpdz')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 font-noraml">距离判断：</label>
                <div class="col-sm-4" style="margin-top: -6px">
                    <select class="form-control noselect2 selectpicker" name="julpd" id="julpd" data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('julpd')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>

                <label class="col-sm-2 font-noraml">跨越：</label>
                <div class="col-sm-4" style="margin-top: -6px">
                    <select class="form-control noselect2 selectpicker" name="kuay" id="kuay" data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('kuayue')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 font-noraml">绕：</label>
                <div class="col-sm-4" style="margin-top: -6px">
                    <select class="form-control noselect2 selectpicker" name="rao" id="rao" data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('raorao')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>

                <label class="col-sm-2 font-noraml">钻：</label>
                <div class="col-sm-4" style="margin-top: -6px">
                    <select class="form-control noselect2 selectpicker" name="zuan" id="zuan" data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('zuanzuan')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 font-noraml">插棍：</label>
                <div class="col-sm-4" style="margin-top: -6px">
                    <select class="form-control noselect2 selectpicker" name="chag" id="chag" data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('chagun')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>

                <label class="col-sm-2 font-noraml">力量：</label>
                <div class="col-sm-4" style="margin-top: -6px">
                    <select class="form-control noselect2 selectpicker" name="lil" id="lil" data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('liliang')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>


        </form>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-select-css"/>
<th:block th:include="include :: bootstrap-select-js"/>
<script th:src="@{/js/sortable.js}"></script>
<script th:inline="javascript">
    // 权限

    // 字典
    var bultt = [[${@dict.getType('bultt')}]];
    var zhanzbl = [[${@dict.getType('zhanzbl')}]];
    var zuozbl = [[${@dict.getType('zuozbl')}]];
    var dongtph = [[${@dict.getType('dongtph')}]];
    var jingtph = [[${@dict.getType('jingtph')}]];
    var xietx = [[${@dict.getType('xietx')}]];
    var kongjcs = [[${@dict.getType('kongjcs')}]];
    var kongjpd = [[${@dict.getType('kongjpd')}]];
    var panpdz = [[${@dict.getType('panpdz')}]];
    var julpd = [[${@dict.getType('julpd')}]];
    var kuay = [[${@dict.getType('kuay')}]];
    var rao = [[${@dict.getType('rao')}]];
    var zuan = [[${@dict.getType('zuan')}]];
    var chag = [[${@dict.getType('chag')}]];
    var lil = [[${@dict.getType('lil')}]];

    var prefix = ctx + "business/courseChildScore";
    $(function () {
        //当天回填
        $.ajax({
            type: "GET",
            url: prefix + "/getBasicExpression?childCourseId="+$("#childCourseId").val()+"&childId="+$("#childId").val(),
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                if(data.code ==0 && data.data !=undefined){
                    var obj = JSON.parse(data.data.basicExpression);
                    for(var i in obj){
                        if(i!="speed"&&obj[i] !=null){
                            $("#"+i).selectpicker('val',obj[i]);
                        }
                        if(i=="speed"&&obj[i] !=null){
                            $("#"+i).val(obj[i]);
                        }
                    }
                }
            }
        });

        // var options = {
        //     url: prefix + "/listBasicExpression",
        //     modalName: "数据",
        //     // onLoadSuccess: onLoadSuccess,
        //     columns: [
        //         {
        //             field: 'dayDate',
        //             title: '上课日期',
        //         },
        //         {
        //             field: 'basicExpression',
        //             title: '训练包名称',
        //             formatter: function (value, row, index) {
        //                 var obj = JSON.parse(value);
        //                 var html="";
        //                 console.log(obj);
        //                 for(var i in obj){
        //                     html=dealDict(i,obj[i],html);
        //                 }
        //
        //                 return html;
        //             }
        //         },
        //         {
        //             field: 'updateTime',
        //             title: '保存时间',
        //         }]
        // };
        // $.table.init(options);

    });

    function dealDict(type,valList,html) {
        if(valList!=null && valList!="" && type=="bultt"){
            html+="<strong>不良体态:</strong>";
            var str ="";
            for(var k in valList){
                str+=(str!=""?",":"");
                str+=$.table.selectDictLabel(bultt, valList[k]);
            }
            str+=";";
            html+=str;
        }
        if(valList!=null && valList!="" && type=="zhanzbl"){
            html+="<strong>站姿不良:</strong>";
            var str ="";
            for(var k in valList){
                str+=(str!=""?",":"");
                str+=$.table.selectDictLabel(zhanzbl, valList[k]);
            }
            str+=";";
            html+=str;
        }
        if(valList!=null && valList!="" && type=="zuozbl"){
            html+="<strong>坐姿不良:</strong>";
            var str ="";
            for(var k in valList){
                str+=(str!=""?",":"");
                str+=$.table.selectDictLabel(zuozbl, valList[k]);
            }
            str+=";";
            html+=str;
        }
        if(valList!=null && valList!="" && type=="dongtph"){
            html+="<strong>动态平衡:</strong>";
            var str ="";
            for(var k in valList){
                str+=(str!=""?",":"");
                str+=$.table.selectDictLabel(dongtph, valList[k]);
            }
            str+=";";
            html+=str;
        }
        if(valList!=null && valList!="" && type=="jingtph"){
            html+="<strong>静态平衡:</strong>";
            var str ="";
            for(var k in valList){
                str+=(str!=""?",":"");
                str+=$.table.selectDictLabel(jingtph, valList[k]);
            }
            str+=";";
            html+=str;
        }
        if(valList!=null && valList!="" && type=="xietx"){
            html+="<strong>协调性:</strong>";
            var str ="";
            for(var k in valList){
                str+=(str!=""?",":"");
                str+=$.table.selectDictLabel(xietx, valList[k]);
            }
            str+=";";
            html+=str;
        }
        if(valList!=null && valList!="" && type=="kongjcs"){
            html+="<strong>空间常识:</strong>";
            var str ="";
            for(var k in valList){
                str+=(str!=""?",":"");
                str+=$.table.selectDictLabel(kongjcs, valList[k]);
            }
            str+=";";
            html+=str;
        }
        if(valList!=null && valList!="" && type=="kongjpd"){
            html+="<strong>空间判断:</strong>";
            var str ="";
            for(var k in valList){
                str+=(str!=""?",":"");
                str+=$.table.selectDictLabel(kongjpd, valList[k]);
            }
            str+=";";
            html+=str;
        }
        if(valList!=null && valList!="" && type=="panpdz"){
            html+="<strong>攀爬动作:</strong>";
            var str ="";
            for(var k in valList){
                str+=(str!=""?",":"");
                str+=$.table.selectDictLabel(panpdz, valList[k]);
            }
            str+=";";
            html+=str;
        }
        if(valList!=null && valList!="" && type=="julpd"){
            html+="<strong>距离判断:</strong>";
            var str ="";
            for(var k in valList){
                str+=(str!=""?",":"");
                str+=$.table.selectDictLabel(julpd, valList[k]);
            }
            str+=";";
            html+=str;
        }
        if(valList!=null && valList!="" && type=="kuay"){
            html+="<strong>跨越:</strong>";
            var str ="";
            for(var k in valList){
                str+=(str!=""?",":"");
                str+=$.table.selectDictLabel(kuay, valList[k]);
            }
            str+=";";
            html+=str;
        }
        if(valList!=null && valList!="" && type=="rao"){
            html+="<strong>绕:</strong>";
            var str ="";
            for(var k in valList){
                str+=(str!=""?",":"");
                str+=$.table.selectDictLabel(rao, valList[k]);
            }
            str+=";";
            html+=str;
        }
        if(valList!=null && valList!="" && type=="zuan"){
            html+="<strong>钻:</strong>";
            var str ="";
            for(var k in valList){
                str+=(str!=""?",":"");
                str+=$.table.selectDictLabel(zuan, valList[k]);
            }
            str+=";";
            html+=str;
        }
        if(valList!=null && valList!="" && type=="chag"){
            html+="<strong>插棍:</strong>";
            var str ="";
            for(var k in valList){
                str+=(str!=""?",":"");
                str+=$.table.selectDictLabel(chag, valList[k]);
            }
            str+=";";
            html+=str;
        }
        if(valList!=null && valList!="" && type=="lil"){
            html+="<strong>力量:</strong>";
            var str ="";
            for(var k in valList){
                str+=(str!=""?",":"");
                str+=$.table.selectDictLabel(lil, valList[k]);
            }
            str+=";";
            html+=str;
        }
        if(valList!=null && valList!="" && type=="speed"){
            html+="<strong>10米折返跑时间:"+valList+";</strong>";
        }

        return html;
    }

    function submitHandler() {
        if ($.validate.form()) {
            add();
        }
    }
    function add() {
        var basicExpression={
            "bultt":$("#bultt").val(),
            "zhanzbl":$("#zhanzbl").val(),
            "zuozbl":$("#zuozbl").val(),
            "dongtph":$("#dongtph").val(),
            "jingtph":$("#jingtph").val(),
            "xietx":$("#xietx").val(),
            "kongjcs":$("#kongjcs").val(),
            "kongjpd":$("#kongjpd").val(),
            "speed":$("#speed").val(),
            "panpdz":$("#panpdz").val(),
            "julpd":$("#julpd").val(),
            "kuay":$("#kuay").val(),
            "rao":$("#rao").val(),
            "zuan":$("#zuan").val(),
            "chag":$("#chag").val(),
            "lil":$("#lil").val()
        }
        var data={
            "childCourseId": $("#childCourseId").val(),
            "childId": $("#childId").val(),
            "basicExpression": JSON.stringify(basicExpression)
        }
        $.ajax({
            type: "POST",
            url: prefix + "/saveBasicExpression",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                $.modal.alertSuccess("保存成功");
            }
        });
    }


    /*详细*/
    function detail(trainPackageId) {
        var url = prefix + "/detail/" + trainPackageId;
        $.modal.openTab("训练包详情", url);
    }

    function del(id) {
        $.ajax({
            url: prefix + "/saveBasicExpression",
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(reqData),
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                $.table.refresh();
            }
        });
    }
</script>
</body>

</html>